來說明一下基本 react hook 的用法

useState 的功能及用法

管理 state，回傳 stateful 的值與更新該 state 的函式

const [ state名稱 , setState的函式名 ] = useState(state的初始值);

使用 useState 的步驟

這裏用一個簡單的 click counter 作為例子

1. 先從 react import {useState}

import react, { useState } from 'react';

2. 設定 state 的名稱，改變 state 的函式名以及 state 的初始值

const [countTimes, setCount] = useState(0)

3. 在特定元素的哪個事件會導致 改變 state 的函式被觸發

return (
    <>
      <button
        onClick={() => {
          setCount(countTimes + 1)
        }}
      >
        click
      </button>
      <p>{countTimes}</p>
    </>
  )

附上 codesandbox 供參考
codesandbox 點這裡

參考資料

https://zh-hant.reactjs.org/docs/hooks-overview.html

https://www.freecodecamp.org/news/react-hooks-fundamentals/

https://zh-hant.reactjs.org/docs/hooks-state.html
https://zh-hant.reactjs.org/docs/hooks-effect.html

havnt read yet...
https://juejin.cn/post/7083308347331444750

https://www.javatpoint.com/react-hooks
https://www.robinwieruch.de/react-hooks-fetch-data/
https://reactjs.org/docs/hooks-effect.html

https://overreacted.io/zh-hant/a-complete-guide-to-useeffect/